<template>
  <div class="aui-wrapper aui-page__login">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <div class="login-header">
          <h2 class="login-brand">{{ $t("brand.lg") }}</h2>
        </div>
        <div class="login-body">
          <!-- <h3 class="login-title">{{ $t("login.title") }}</h3> -->
          <el-form
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            @keyup.enter.native="dataFormSubmitHandle()"
            status-icon
          >
            <el-form-item prop="username">
              <el-input
                v-model="dataForm.username"
                :placeholder="$t('login.username')"
              >
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true">
                    <use xlink:href="#icon-user"></use>
                  </svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="dataForm.password"
                type="password"
                :placeholder="$t('login.password')"
              >
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true">
                    <use xlink:href="#icon-lock"></use>
                  </svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input
                    v-model="dataForm.captcha"
                    :placeholder="$t('login.captcha')"
                  >
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true">
                        <use xlink:href="#icon-safetycertificate"></use>
                      </svg>
                    </span>
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()" />
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="dataFormSubmitHandle()"
                class="w-percent-100"
                >{{ $t("login.title") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="login-footer">
          <p>
            <a href="http://www.xxljunjun.com" target="_blank">网站首页</a>
          </p>
          <p>
            <a href="http://xxljunjun.github.io" target="_blank">个人网站</a
            >{{ year }} © xxljunjun.github.io
          </p>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { format } from "date-fns";
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
import { getUUID } from "@/utils";
import { getSomeCodeImg, goToLogin } from "@/api/login.js";
export default {
  data() {
    return {
      year: "",
      captchaPath: "",
      dataForm: {
        username: "admin",
        password: "admin",
        uuid: "",
        captcha: "",
      },
    };
  },
  computed: {
    dataRule() {
      return {
        username: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  created() {
    this.year = format(new Date(), "yyyy");
    this.getCaptcha();
  },
  methods: {
    // 获取验证码
    async getCaptcha() {
      this.dataForm.uuid = getUUID();
      const { uuid } = this.dataForm;
      const res = await getSomeCodeImg({ uuid });
      this.captchaPath = window.URL.createObjectURL(res);
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function() {
        //直接登录
        this.$refs["dataForm"].validate(async (valid) => {
          if (!valid) {
            return false;
          }

          const res = await goToLogin(this.dataForm);
          this.getCaptcha();
          if (res.code == 200) {
            Cookies.set("token", res.data.token);
            setTimeout(async () => {
              //获取用户信息
              const res = await this.$store.dispatch("user/get_userInfo");
              const { data } = res;
              this.afterLoginSucceed(data);
            }, 50);
            this.$router.replace({ name: "home" });
          }
        });
      },
      1000,
      { leading: true, trailing: false }
    ),
    afterLoginSucceed(result) {
      const h = this.$createElement;
      this.$notify({
        title: "登录成功",
        message: h(
          "i",
          { style: "color: teal" },
          `欢迎${result?.username}回家！`
        ),
      });
    },
  },
};
</script>
